<template>
  <div>
    <span>id: {{ id }}</span>
    <el-button @click="handleClick">changeId</el-button>
    <el-button @click="stop()">停止侦听器</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
/**
 * 变量定义
 */
const id = ref(1)
/**
 * 事件回调
 */
const handleClick = () => {
  id.value++
}

/**
 * 侦听器
 */
// 它会自动停止
const stop = watchEffect(() => {
  console.log('同步', id.value)
})

// 这个不会自动停止
setTimeout(() => {
  watchEffect(() => {
    console.log('异步', id.value)
  })
}, 100)


</script>
